<template>
    <div class="personal" >
        <div class="header">
            <i @click='goBack' class="iconfont icon-xia"></i>
            上传新的头像
        </div>
            <ul>
                <li style="background-size: cover;" class="image-reader-item" ref="ii">
                    <md-image-reader
                            name="reader0"
                            @select="onReaderSelect"
                            @complete="onReaderComplete"
                            @error="onReaderError"
                            is-multiple
                    ></md-image-reader>
                    <md-icon name="hollow-plus" size="lg" color="#CCC"></md-icon>
                </li>
            </ul>
        <p style="text-align: center;font-weight: 600;line-height: 25px;">上传照片</p>
        <p style="text-align: center;font-weight: normal;line-height: 35px;">(大小为100kb以内,支持格式jpg,png,gif,bmp)</p>
        <div ref="head" style="width: 80px;height: 80px;"><img style="height: 100%;width: 100%;" :src="$store.state.userinfo.user_head" alt=""></div>
        <p style="font-weight: 600;line-height: 30px;padding-left: 9px;">当前头像</p>
    </div>
</template>

<script>
import { Icon, ImageReader, Toast } from 'mand-mobile';

export default {
  name: 'personal',
  components: {
    [Icon.name]: Icon,
    [ImageReader.name]: ImageReader,
  },
  data() {
    return {
      _url: '',
    };
  },
  methods: {
    goBack() {
      window.history.length > 1
        ? this.$router.go(-1)
        : this.$router.push('/');
    },
    onReaderSelect(name, { files }) {
      files.forEach((file) => {
        console.log('[Mand Mobile] ImageReader Selected:', `File Name ${file.name}`);
      });
      Toast.loading('图片读取中...');
    },
    async onReaderComplete(name, { dataUrl, file }) {
      const formData = new FormData();
      formData.append('file', file);
      formData.append('uid', this.$store.state.userinfo.uid);
      if (file) {
        Toast.loading('上传中请等待');
        const res = await this.$api.post('/user/head', formData, {
          headers: { 'Content-Type': 'multipart/form-data' },
        });
        console.log(res);
        // 先判断是否成功
        if (res.data.url) {
          Toast.succeed('上传成功');
          console.log(res.data);
          this.$store.state.userinfo.user_head = res.data.url;
          document.querySelector('.image-reader-item').style.background = `url(${res.data.url}) no-repeat center center`;
        } else {
          Toast.failed('上传失败哦');
        }
      }
      Toast.hide();
    },
    onReaderError(name, { msg }) {
      Toast.failed(msg);
    },
  },
};

</script>

<style lang="scss" scoped>
    $vm_base:375;  //设计图的宽度
    @function vw($px) {
        @return ($px / $vm_base) * 100vw;
    }
    .header{
        position: relative;
        height: vw(48);
        color: #ffffff;
        font-size: vw(20);
        line-height: vw(48);
        text-align: center;
        background-color: #ffb001;
        i{
            position: absolute;
            color:#ffffff;
            font-size: vw(20);
            display: inline-block;
            line-height: vw(20);
            height: vw(20);
            width: vw(20);
            top: vw(24);
            left: vw(20);
            margin-top: vw(-10);

        }
    }
ul{
    height: vw(250);
    position: relative;
    li{
        text-align: center;
        position: absolute;
        line-height: vw(200);
        width: vw(200);
        height: vw(200);
        margin-top: vw(-100);
        margin-left: vw(-100);
        left: 50%;
        top: 50%;
        /*background: #f5f5f5;*/
        opacity: 0.7;
        border: 1px solid #8e8e8e;
        border-radius: vw(20);
    }
}
</style>
